<!--
 * @Author: yukang 18790336164@163.com
 * @Date: 2024-06-08 18:48:03
 * @LastEditors: yukang 18790336164@163.com
 * @LastEditTime: 2024-06-08 21:32:48
 * @FilePath: \admin-pro-pro-develop\src\components\Expand\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <vab-icon
    class="expand"
    :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
    :style="{ color, top, right }"
    @click="handleToggleScreenFull"
  />
</template>

<script>
  import '$ui/icons/mid-fill'
  import '$ui/icons/expand-fill'
  import screenfull from 'screenfull'
  import { myDvIcon } from '$ui/dv'
  export default {
    components: {
      myDvIcon,
    },
    props: {
      color: {
        type: String,
        default: '#fff',
      },
      top: {
        type: String,
        default: '0px',
      },
      right: {
        type: String,
        default: '0px',
      },
    },
    data() {
      return {
        isFullscreen: false,
      }
    },
    methods: {
      async handleToggleScreenFull() {
        await screenfull.toggle()
        this.isFullscreen = screenfull.isFullscreen
        this.$emit('change')

        if (this.isFullscreen) {
          this.$bus.$emit('rootClass', 'no-left-top')
        } else {
          this.$bus.$emit('rootClass', '')
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .expand {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1000;
    display: flex !important;
    align-items: center;
    width: 25px;
    height: 25px;
    padding: 5px;
    font-size: 20px;
    pointer-events: auto;
    cursor: pointer;
    background: #333;
    border-radius: 6px;
  }
</style>
